<!--
 * @Autor: dingxiaolin
 * @Date: 2021-10-13 16:10:53
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-11-13 18:54:18
-->
<template>
    <div id="barsChart"></div>
</template>

<script>
//五天内各药品分类统计
import echarts from 'echarts';
import { api } from '@/http/api';

export default {
    name: 'barsChart',
    components: {},
    computed: {},
    data() {
        return {
            dataTime: [],
        };
    },
    mounted() {
        setTimeout(() => {
            this.drawChart();
        });
    },
    methods: {
        drawChart() {
            var barsChart = echarts.init(document.getElementById('barsChart'));
            window.addEventListener('resize', () => {
                barsChart.resize();
            });
            api.InformationRecord_GetInformationRecordEightDaysStatistics().then((res) => {
                console.log(res);
                var option = {
                    title: [
                        {
                            left: '5%',
                            top: '5%',
                            text: '五天内各药品分类统计',
                            textStyle: {
                                color: '#ddd',
                                fontSize: 14,
                            },
                        },
                    ],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                        },
                    },
                    grid: {
                        left: '2%',
                        right: '4%',
                        bottom: '5%',
                        top: '25%',
                        containLabel: true,
                    },
                    legend: {
                        data: [],
                        right: 10,
                        top: 12,
                        textStyle: {
                            color: '#ddd',
                        },
                        itemWidth: 12,
                        itemHeight: 10,
                        // itemGap: 35
                    },
                    xAxis: {
                        type: 'category',
                        data: this.dataTime,
                        axisLine: {
                            lineStyle: {
                                color: 'white',
                            },
                        },
                        axisLabel: {
                            // interval: 0,
                            // rotate: 40,
                            textStyle: {
                                fontFamily: 'Microsoft YaHei',
                            },
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'white',
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.3)',
                            },
                        },
                        axisLabel: {},
                    },
                    series: [
                        {
                            name: '1',
                            type: 'bar',
                            barWidth: '15%',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#fccb05',
                                        },
                                        {
                                            offset: 1,
                                            color: '#f5804d',
                                        },
                                    ]),
                                },
                            },
                            data: [],
                        },
                        {
                            name: '2',
                            type: 'bar',
                            barWidth: '15%',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#8bd46e',
                                        },
                                        {
                                            offset: 1,
                                            color: '#09bcb7',
                                        },
                                    ]),
                                },
                            },
                            data: [],
                        },
                        {
                            name: '3',
                            type: 'bar',
                            barWidth: '15%',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#248ff7',
                                        },
                                        {
                                            offset: 1,
                                            color: '#6851f1',
                                        },
                                    ]),
                                },
                            },
                            data: [],
                        },
                        {
                            name: '4',
                            type: 'bar',
                            barWidth: '15%',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#05F5FF',
                                        },
                                        {
                                            offset: 1,
                                            color: '#65D5FF',
                                        },
                                    ]),
                                },
                            },
                            data: [],
                        },
                    ],
                };
                res.map((v, i) => {
                    this.dataTime.push(v.time);
                    v.items.map((v, i) => {
                        option.series[i].name = v.drugClassification;
                        option.legend.data.push(v.drugClassification);
                        option.series[i].data.push(v.count);
                    });
                });

                barsChart.setOption(option);
            });
        },
    },
};
</script>

<style lang='scss' scoped>
#barsChart {
    width: 100%;
    height: 100%;
}
</style>
